<template lang='pug'>
.horse-race
  #runbox.runbox
    span.msg(v-for="item in arr") {{item}}
  .cover
</template>
<script>
import {animate} from '@/config/wtool'
export default {
  data(){
    return {
      arr: [],
      time: -1
    }
  },
  mounted() {
    this.init()
  },
  beforeDestroy() {
    if (this.time != -1) {
      clearInterval(this.time)
    }
  },
  props: {
    msg : {
      type:String,
      default: '请选择附近的小店'
    }
  },
  methods: {
    init() {
      clearInterval(this.time)
      let a = []
      a.push(this.msg)
      if (this.msg.length >= 6) {
        a.push(this.msg)
        this.arr = a
        this.$nextTick(function() {
          this.run()
        })
      }else {
        this.arr = a
      }
    },
    run () {
      clearInterval(this.time)
      let horse = document.getElementById('runbox')
      let width = horse.offsetWidth
      let leftNum = 0
      this.time =setInterval(function () {
        leftNum +=1
        if (leftNum >= width/2) {
          leftNum = 0;
        }
        horse.style.left = `-${leftNum}px`
      },20)
    }
  }
}
</script>
<style lang='scss' scoped>
@import './tool.scss';
.horse-race {
  display: inline-block;
  width: _(209);
  height: _(40);
  line-height: _(40);
  position: relative;
  overflow: hidden;
  .runbox {
    position: absolute;
    top: 0;
    left: 0;
    white-space: nowrap;
    .msg {
      display: inline-block;
      margin-right: _(20);
      font-size: _(28);
      line-height: _(40);
      // animation:mymove  5s infinite;
    }
  }
  .cover {
    width: _(60);
    height: _(40);
    position: absolute;
    top: 0;
    right: 0;
    background-image: url('/static/images/cover.png');
    background-size: 100% 100%;
  }
}
@keyframes mymove
{
	from {left:0px;}
	to {left:200px;}
}
</style>  